<template>
  <div class="button-container">
    <div class="icon-left">
      <span @click="play" v-show="!showPlay" class="iconfont a">&#xe769;</span>
      <span @click="play" v-show="showPlay" class="iconfont b">&#xe79f;</span>
    </div>
    <div class="icon-right">
      <span v-show="showVolume" @click="controlVolume" class="iconfont c">&#xe757;</span>
      <span v-show="!showVolume" @click="controlVolume" class="iconfont c">&#xe61e;</span>
      <span @click="changeScreen" class="iconfont d">&#xe660;</span>
      <span class="iconfont e">&#xe64c;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "IconButton",
  data() {
    return {
      showPlay: false,
      showVolume: true
    };
  },
  methods: {
    play() {
      this.$emit("pause");
    },
    controlVolume() {
      this.showVolume = !this.showVolume;
      this.$emit("controlVolume", this.showVolume);
    },
    noVolume() {
      this.showVolume = false;
    },
    haveVolume() {
      this.showVolume = true;
    },
    // 进行全屏
    changeScreen() {
      this.$parent.FullScreen();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "common/scss/mixin.scss";
.button-container {
  @include display-r;
  flex-direction: space-between;
  .icon-left {
    @include display-r;
    width: 70%;
    padding-left: 30px;
    box-sizing: border-box;
    .iconfont {
      font-size: 45px;
      color: #fff;
    }
    .b {
      font-size: 45px;
    }
  }
  .icon-right {
    @include display-r;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    box-sizing: border-box;
    width: 30%;
    .iconfont {
      font-size: 50px;
      color: #fff;
    }
    .d {
      font-size: 40px;
    }
  }
}
</style>